<template>
  <div class="information-list-wrap">
  	banner{{banner}}
		<info-header :has-login="false"></info-header>
		<div class="login-tips-wrap" v-show="loginFlag" v-if="banner">
			<div class="login-mask"></div>
			<div class="login-tips-inner-wrap">
				<div class="login-tips" style="width: 330px;">请点击右上方登录，登录后查看关注信息</div>
				<div class="login-tips" style="display: inline-block;" @click="closeTips"><i class="login-tips-close-icon" title="点我关闭" ></i>我知道了！</div>
			</div>
		</div>
		<div class="information-ul-wrap" :class="{'has-banner':banner}">
			<div class="information-ul-inner-wrap fix">
				<div class="follow-hot-wrap fl">
					<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" v-show="activeIndex == 0">
						<ul>
							<li class="information-li" v-for="(item,index) in lists" :key="index" title="点我查看详情" >
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a" target="_blank" v-if="item.cover || item.images.length>0 && item.images.length<3">
									<div class="is-video-bg" v-show="item.type == 2"></div>
									<div class="information-img-wrap">
										<img v-lazy="urlFilter(item.cover)" alt="封面" class="information-img" v-if="item.cover"/>
										<img v-lazy="urlFilter(item.images[0])" alt="封面" class="information-img" v-else/>
									</div>
									<div class="information-li-cell">
										<div class="information-li-cell-header fix">
											<div class="information-li-cell-title">{{item.title}}</div>
										</div>
										<div class="information-li-cell-intro" v-html="item.desc.replace(/&nbsp;/g,'').replace(/^\s+|\s+$/g,'')" v-if="item.desc">
										</div>
										<div class="information-li-cell-intro" v-else></div>
										<div class="information-li-cell-des" :class="{'active':item.tagList.length == 6 && item.tag.replace(';','').length>26}">
											<div class="information-li-sign-wrap">
												<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
													<i class="icon sign-icon"></i>{{tag}}
												</div>
											</div>
											<div class="information-li-cell-avatar ell" :title="item.username">
												{{item.username}}
												<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
											</div>
										</div>
									</div>
								</router-link>
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a information-li-6-a" target="_blank" v-else-if="item.images.length>=3 && item.images.length<=6">
									<div class="information-li-cell-header-6 flex">
										<div class="information-li-cell-title-6 cell-title-ft18 flex-1 ell">{{item.title}}</div>
									</div>
									<div class="information-li-middle-image-wrap-6 flex">
										<img v-lazy="urlFilter(imageitem)" alt="封面" class="information-img" v-for="(imageitem,index) in item.images" :key="index" v-if="index<=2"/>
									</div>
									<div class="flex">
										<div class="information-li-sign-wrap flex-1">
											<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
												<i class="icon sign-icon"></i>{{tag}}
											</div>
										</div>
										<div class="information-li-cell-right-6">											
											<div class="information-li-cell-avatar ell" :title="item.username" style="margin-top: 0;">
												{{item.username}}
												<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
											</div>
										</div>
									</div>

								</router-link>
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a information-li-0-a" target="_blank" v-else>
									<div class="cell-title-ft24 ell">{{item.title}}</div>
									<div class="flex" style="margin-top: 20px;">
										<div class="information-li-sign-wrap flex1">
											<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
												<i class="icon sign-icon"></i>{{tag}}
											</div>
										</div>
										<div class="information-li-cell-avatar ell" :title="item.username" style="margin-top: 0;">
											{{item.username}}
											<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
										</div>
									</div>
								</router-link>
							</li>
						</ul>
						<div class="none tc" v-show="tips">全部加载完咯</div>
						<div class="loading tc" v-show="loading"><img src="../assets/images/loading.gif" alt="" /><div class="load-text">内容加载中...</div></div>
					</div>
					<div v-show="activeIndex == 1" v-infinite-scroll="loadFollowMore" infinite-scroll-disabled="followBusy" infinite-scroll-distance="10">
						<ul>
							<li class="information-li" v-for="(item,index) in followLists" :key="index" title="点我查看详情">
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a" target="_blank" v-if="item.cover || item.images.length>0 && item.images.length<3">
									<div class="is-video-bg" v-show="item.type == 2"></div>
									<div class="information-img-wrap">
										<img v-lazy="urlFilter(item.cover)" alt="封面" class="information-img" v-if="item.cover"/>
										<img v-lazy="urlFilter(item.images[0])" alt="封面" class="information-img" v-else/>
									</div>
									<div class="information-li-cell">
										<div class="information-li-cell-header fix">
											<div class="information-li-cell-title">{{item.title}}</div>
										</div>
										<div class="information-li-cell-intro" v-html="item.desc.replace(/&nbsp;/g,'').replace(/^\s+|\s+$/g,'')" v-if="item.desc">
										</div>
										<div class="information-li-cell-intro" v-else></div>
										<div class="information-li-cell-des" :class="{'active':item.tagList.length == 6 && item.tag.replace(';','').length>26}">
											<div class="information-li-sign-wrap">
												<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
													<i class="icon sign-icon"></i>{{tag}}
												</div>
											</div>
											<div class="information-li-cell-avatar ell" :title="item.username">
												{{item.username}}
												<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
											</div>
										</div>
									</div>
								</router-link>
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a information-li-6-a" target="_blank" v-else-if="item.images.length>=3 && item.images.length<=6">
									<div class="information-li-cell-header-6 flex">
										<div class="information-li-cell-title-6 cell-title-ft18 flex-1 ell">{{item.title}}</div>
									</div>
									<div class="information-li-middle-image-wrap-6 flex">
										<img v-lazy="urlFilter(imageitem)" alt="封面" class="information-img" v-for="(imageitem,index) in item.images" :key="index" v-if="index<=2"/>
									</div>
									<div class="flex">
										<div class="information-li-sign-wrap flex-1">
											<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
												<i class="icon sign-icon"></i>{{tag}}
											</div>
										</div>
										<div class="information-li-cell-right-6">											
											<div class="information-li-cell-avatar ell" :title="item.username" style="margin-top: 0;">
												{{item.username}}
												<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
											</div>
										</div>
									</div>

								</router-link>
								<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="information-li-a information-li-0-a" target="_blank" v-else>
									<div class="cell-title-ft24 ell">{{item.title}}</div>
									<div class="flex" style="margin-top: 20px;">
										<div class="information-li-sign-wrap flex1">
											<div class="sign-item ell" v-for="(tag,index) in item.tagList" :title="tag" v-if="tag" :key="index">
												<i class="icon sign-icon"></i>{{tag}}
											</div>
										</div>
										<div class="information-li-cell-avatar ell" :title="item.username" style="margin-top: 0;">
											{{item.username}}
											<div class="information-li-cell-time"><i class="icon small-time-icon"></i>{{item.created_at}}</div>
										</div>
									</div>
								</router-link>
							</li>
						</ul>
						<div class="none tc" v-show="followTips">全部加载完咯</div>
						<div class="loading tc" v-show="followLoading"><img src="../assets/images/loading.gif" alt="" /><div class="load-text">内容加载中...</div></div>
					</div>
				</div>
				<div class="most-hot-wrap fr">
					<div class="most-hot-inner-wrap">
						<div class="most-hot-header-wrap">
							<h3>最热</h3>
						</div>
						<div class="loading tc" v-if="!hotestLoading"><img src="../assets/images/loading.gif" alt="" /><div class="load-text">内容加载中...</div></div>
						<div class="most-hot-ul-wrap" v-else>
							<ul class="most-hot-inner-ul" v-if="hottests.length > 0">
								<li class="most-hot-inner-li" v-for="(item,index) in hottests" :key="index" title="点我查看详情">
									<strong class="most-hot-inner-li-strong"></strong>
									<router-link :to="{ name:'detail',params:{ uuid: item.uid }}" class="most-hot-inner-a"  target="_blank">{{item.title}}</router-link>
								</li>
							</ul>
							<div v-else style="line-height: 50px;text-align: center;">暂无最热!</div>
						</div>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>
<script>
import api from 'src/api'
import {static_url} from '../util/const';
import { mapGetters} from 'vuex'
import InfoHeader from '../components/header/InfoHeader'
import {getCookie,removeCookie,IsPC} from 'util/util'
import bus from '../assets/js/eventBus'
export default {
  name: 'Index',
  title() {
    return {
      title: '微观财经',
      keywords: '微观财经，投资者教育，微观 财经新闻，股票，期货，基金，债券，外汇，信托，理财，财经频道，财经网站，财经资讯，财经自媒体',
      description: '微观财经首页'
    }
  },
  data(){
  	return {
  		num:10,
  		page:1,
			tips:false,
			loading:true,
			busy: false,
			//关注
			followPage:1,
			followTips:false,
			followLoading:true,
			followBusy:true,
			//tab切换
			activeIndex:0,
			loginFlag:false,
			hotestLoading:false
  	}
  },
  components:{
  	InfoHeader
  },
  computed: {
    ...mapGetters({
      lists: 'getLists',
      banner:'banner',
      followLists:'followLists',
      hottests:'hottests'
    })
  },
  methods: {
		urlFilter(coverUrl){
			if(coverUrl.indexOf("http") === -1){
				return static_url + coverUrl;
			}else{
				return  coverUrl;
			}
		},
		closeTips(){
			this.loginFlag = false;
		},
		getData(){
				if(this.activeIndex == 0){
					this.$store.dispatch('getLists',++this.page).then(res=>{
							if(res.error == 0){
				        if (res.data.length){
				        	if(res.data.length == 10){
				        		this.busy = false;		
				        	}else{
				        		this.busy = true;
										this.tips = true;
										this.loading = false;		
				        	}
				        }else{
			        		this.busy = true;
									this.tips = true;
									this.loading = false;	
				        }
				      }else{
				      	layer.msg(res.msg, {icon: 5});
				      }
					});
				}else{
					this.$store.dispatch('getFollowLists',this.followPage++).then(res=>{
							if(res.error == 0){
				        if (res.data.length){
				        	if(res.data.length == 10){
				        		this.followBusy = false;		
				        	}else{
				        		this.followBusy = true;
										this.followTips = true;
										this.followLoading = false;		
				        	}
				        }else{
			        		this.followBusy = true;
									this.followTips = true;
									this.followLoading = false;	
				        }
				      }else{
				      	layer.msg(res.msg, {icon: 5});
				      }
					});
				}
			},
			loadMore(){
				let vm = this;
				this.busy = true;
      	this.loading = true;
      	this.tips = false;
	     	setTimeout(() => {
		        vm.getData();
		    }, 1000);
			},
			loadFollowMore(){
				let vm = this;
				this.followBusy = true;
				this.followLoading = true;
				this.followTips = false;
		      	setTimeout(() => {
			        vm.getData();
			    }, 1000);
			}
	},
  asyncData({ store,cookies }) {
    return store.dispatch('getLists',this.page).then(()=>{return store.dispatch('getBanner',cookies)})
  },
  beforeMount(){
  	this.$store.dispatch('getHottests').then(res=>{this.hotestLoading = true});
  },
  mounted(){
  		let that = this,url = '';
			bus.$on("tabChange",function(index){
				if(index){
					that.busy = true;
					that.followBusy = false;
					if(getCookie('UNION_TOKEN') && getCookie('UNION_TOKEN')!=''){
						that.activeIndex = index;
					}else{
						that.loginFlag = true;
					}
				}else{
					that.activeIndex = index;
					that.busy = false;
					that.followBusy = true;
				}
			})
  }
}

</script>
<style type="text/css">
	.information-ul-wrap.has-banner{padding-top:56px ;}
	.information-li-a{display: block;padding:20px;overflow: hidden;transition: background-color .4s;}
	.is-video-bg{position: absolute;width: 256px;height: 144px;background-color: rgba(0,0,0,.6);border: 1px solid #e5e5e5;}
	.is-video-bg:before{content:'';position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;width: 36px;height: 36px;background: url(../assets/images/video-type-icon.png) no-repeat;background-size: contain;}
	.information-li:hover .information-li-a{background-color:#f4f4f4 ;}
	.information-li{border-bottom: 1px solid #ddd;}
	.information-li:last-child{border: 0 none;}
	.information-img-wrap{float: left;width: 258px;height: 146px;margin-right: 20px;overflow: hidden;}
	.information-img{width:100% ;height: 100%;object-fit: cover;transition: transform .4s;border: 1px solid #e5e5e5;}
	.information-img-wrap:hover .information-img{transform: scale(1.05);}
	.information-li-cell{overflow: hidden}
	.information-li-cell-title{display: -webkit-box;height: 50px;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-family: "Source Han Sans CN";font-weight: bold;font-size:18px;line-height:24px;color: rgb(51,51,51);overflow: hidden;}
	.small-title.information-li-cell-title{font-size: 18px;}
	.information-ul-inner-wrap{width: 1110px;margin: auto;}
	.information-li-cell-des{margin-top:8px;font-family: "microsoft yahei";}
	.information-li-cell-des.active{position: relative;}
	.information-li-cell-des.active .information-li-cell-avatar{position: absolute;right: 0;bottom:0;margin-top: 0;}
	.information-li-cell-avatar img{display:inline-block;vertical-align:top;width: 46px;height: 46px;max-width:200px;margin-right:15px;border-radius: 50%;}
	.information-li-sign-wrap{margin: 0 -10px 0 0;font-size: 0;}
	.information-li-cell-avatar{margin-top:2px;color: rgb(153,153,153);font-family: "Source Han Sans CN";font-size: 12px;text-align: right;}
	.information-li-cell-intro{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin-top:7px;height:40px;font-size: 12px;color:#858585;font-family: '微软雅黑';line-height: 20px;overflow: hidden;}
	.information-li-cell-time{display: inline-block;margin-left: 20px;}
	.follow-hot-wrap{width: 800px;}
	.most-hot-header-wrap{position: relative;font-family:'Source Han Sans CN';font-size:18px;color: rgb(52,152,219);}
	.most-hot-wrap{position:fixed;width: 310px;right: 50%;margin-right: -558px;z-index: 2;-webkit-transform: translateZ(0);transform: translateZ(0);}
	.most-hot-inner-wrap{padding: 20px 10px 20px 20px;}
	.most-hot-ul-wrap a{font-family: '微软雅黑';font-size: 14px;color: #535353;transition: color .3s;}
	.most-hot-ul-wrap a:hover{color:rgb(52,152,219)}
	.most-hot-inner-li-strong{position:absolute;top: 10px;left: 2px;width: 2px;height: 2px;border-radius:50%;background-color: #000;margin:0 5px;vertical-align: middle;}
	.most-hot-header-wrap{padding-bottom: 5px;border-bottom: 2px solid #eee;}
	.most-hot-header-wrap h3:before{content: '';display: inline-block;height: 20px;width: 0;margin-right: 8px;border-left:6px solid #3598db;vertical-align: -4px;}
	.most-hot-inner-li{position: relative;margin: 15px 0;padding-left: 15px;}
	.login-tips-wrap{position: fixed;z-index: 4;top: 140px;right: 50%;margin-right: -440px;}
	.login-tips-wrap:after{content: '';position: absolute;width: 85px;height: 77px;background: url(../assets/images/login-tips-arrow.png) no-repeat;right: -80px;top: -80px;}
	.login-mask{position: fixed;top: 0;bottom: 0;left: 0;right:0 ;background: rgba(0,0,0,.5);}
	.login-tips-inner-wrap{text-align: center;}
	.login-tips{padding: 8px 20px;margin-bottom: 20px;border-radius: 20px;background-color: #464646;opacity: .8;font-size: 18px;color: white;font-family: "微软雅黑";cursor: pointer;}
	.login-tips-close-icon{display: inline-block;width: 18px;height: 18px;margin-right: 10px;background: url(../assets/images/login-tips-close.png);vertical-align: -2px;cursor: pointer;}
	/*大于3张图*/
	.information-li-middle-image-wrap-6 img{width: 246px;height: 132px;margin: 20px 0;border: 1px solid #e5e5e5;transition:transform .4s;}
	.information-li-cell-title-6{margin-right: 30px;}
</style>
